<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <meta charset="utf-8">
    <title>浏览文件系统</title>
    <link rel="stylesheet" type="text/css" href="/cykmr/common/css/bootstrap.min.css"/>

    <!--表格效果-->
    <link rel="stylesheet" href="/cykmr/plugin/table/css/normalize.css">
    <link rel="stylesheet" href="/cykmr/plugin/table/css/demo.css">
    <link rel="stylesheet" href="/cykmr/plugin/table/css/component.css">
    <!--导航栏特效CSS-->
    <link rel="stylesheet" href="/cykmr/plugin/navbar/css/navbar.css">

    <link rel="stylesheet" href="/cykmr/cluster/css/cluster-list.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <script src="/cykmr/cluster/js/cluster.js"></script>
    <!-- 删除时确认窗口 -->
    <script src="/cykmr/cluster/js/deleteDialog/bootbox.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <!--分页-->
    <script src="/cykmr/cluster/js/paging/jquery.paging.js"></script>


</head>
<body onload="showClusterList()">
    <!--导航栏-->
    <div id="menu2" class="menu">
        <ul>
            <li><a href="/cykmr/app/app_list.html">首　　页</a></li>
            <li><a href="/cykmr/file/file_list.html">文件管理</a></li>
            <li><a href="#">数据展示</a></li>
            <li><a href="/cykmr/cluster/cluster_list.html">集群管理</a></li>
        </ul>
        <div class="cls"></div>
    </div>
<div class="container">

    <div class="col-md-9 column" style="width: 100%;margin: 20px auto 0;">
        <table class="table">
            <thead>
            <tr>
                <th class="center" style="width:50px;">序号</th>
                <th class="center">集群名称</th>
                <th class="center">集群路径</th>
                <th class="center">创建时间</th>
                <th class="center">更新时间</th>
                <th class="center">操作</th>
            </tr>
            </thead>
            <tbody id="cluster_tbody">
            </tbody>
        </table>
        <div>
            <button class="btn btn-success" data-toggle="modal" data-target="#addClusterModal" style="margin-bottom: 5px">添加</button>
            <button class="btn btn-danger"  style="margin-bottom: 5px" >批量删除</button>
        </div>
        <!--分页跳转-->
        <div style="margin-left: 30%">
            <div class="search-pager" id="backward-paper"></div>
        </div>
    </div>
</div>
<!-- 添加集群窗口 -->
<div class="modal fade"  id="addClusterModal" tabindex="-1" role="dialog" aria-labelledby="appEditLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" >
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="clusterAddLabel">集群编辑窗口</h4>
            </div>
            <div class="modal-body">
                <div class="input-group" style="margin-top: 10px;">
                    <span class="input-group-addon skyBlue">集群名称</span>
                    <input class="form-control" id="clusterName" placeholder="名称">
                </div>
                <div class="input-group" style="margin-top: 10px;">
                    <span class="input-group-addon skyBlue">集群地址</span>
                    <input class="form-control" id="clusterIp" placeholder="IP地址">
                </div>
                <div class="input-group" style="margin-top: 10px;">
                    <span class="input-group-addon skyBlue">集群端口</span>
                    <input  type="number" min="0" max="65535" class="form-control" id="clusterPort" placeholder="端口号">
                </div>
                <div class="input-group" style="margin-top: 10px;">
                    <span class="input-group-addon skyBlue">用户账号</span>
                    <input class="form-control" id="userName" placeholder="用户账号">
                </div>
                <div class="input-group" style="margin-top: 10px;">
                    <span class="input-group-addon skyBlue">账号密码</span>
                    <input type="password" class="form-control" id="userPassword" value="yk@1234">
                </div>
            </div>
            <div class="modal-footer" style="display: flex; justify-content: center; align-items: center;">
                <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
                <button type="button" class="btn btn-primary" onclick="addCluster()">添加</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改集群窗口 -->
<div class="modal fade"  id="editClusterModal" tabindex="-1" role="dialog" aria-labelledby="appEditLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" >
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                    <h4 class="modal-title" id="clusterEditLabel">集群修改窗口</h4>
            </div>
            <div class="modal-body">
                <div class="input-group" style="margin-top: 10px;">
                    <span class="input-group-addon skyBlue">集群名称</span>
                    <input class="form-control" id="editClusterName" >
                </div>
                <div class="input-group" style="margin-top: 10px;">
                    <span class="input-group-addon skyBlue">集群地址</span>
                    <input class="form-control"  id="editClusterIp">
                </div>
                <div class="input-group" style="margin-top: 10px;">
                    <span class="input-group-addon skyBlue">集群端口</span>
                    <input  type="number" min="0" max="65535" class="form-control"  id="editClusterPort">
                </div>
                <div class="input-group" style="margin-top: 10px;">
                    <span class="input-group-addon skyBlue">用户账号</span>
                    <input class="form-control"  id="editClusterUserName">
                </div>
                <div class="input-group" style="margin-top: 10px;">
                    <span class="input-group-addon skyBlue">账号密码</span>
                    <input  type="password" class="form-control"  id="editClusterPassword">
                </div>
                <input type="hidden" id="editClusterId" >
            </div>
            <div class="modal-footer" >
                <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
                <button type="button" class="btn btn-primary" onclick="editCluster()">修改</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>